<template>
  <el-dialog
    width="800px"
    title="选择司机"
    :visible.sync="innerVisible"
    append-to-body
    :before-close="cancel"
  >
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="车牌号" prop="carNumber">
        <el-input
          v-model="queryParams.carNumber"
          placeholder="请输入车牌号"
        ></el-input>
      </el-form-item>
      <el-form-item label="司机姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入司机姓名"
        ></el-input>
      </el-form-item>
      <!-- 搜索和重置 -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :border="true"
      :data="driverList"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column label="车牌号码" align="center" prop="carName">
      </el-table-column>
      <el-table-column width="60" label="位置" align="center" prop="carId">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-location-information"
            @click="handleGps(scope.row)"
            :style="{
              display:
                scope.row.gpsId == '' || scope.row.gpsId == null ? 'none' : '',
            }"
            >定位
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="到期状态"
        align="center"
        prop="expireStatus"
        width="90"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.car_job_expirestatus"
            :value="scope.row.expireStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="司机姓名" align="center" prop="name" />
      <el-table-column label="司机电话" align="center" prop="mobile" />
      <el-table-column label="司机年龄(岁)" align="center" prop="age" />
      <el-table-column label="司机驾龄(年)" align="center" prop="licenseAge" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
    <carGps
      v-if="flag"
      :showGps="showGps"
      :title="title"
      :carData="carData"
      @refresh="refresh"
    ></carGps>
  </el-dialog>
</template>

<script>
import { getDriverList, getGpsId } from "@/api/tms/plan.js";
import { gpsCar } from "@/api/tms/car";
import carGps from "./carGps.vue";
export default {
  dicts: ["car_job_expirestatus"],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carNumber: "",
        name: "",
      },
      arr: [],
      total: 0,
      driverList: [],
      myMultipleSelections: [],
      selectList: [],
      list: [],
      title: "",
      showGps: false,
      carMsg: [],
      gpsId: "",
      carData: {},
      flag: false,
      carName: "",
    };
  },
  watch: {
    innerVisible: function (newV, oldV) {
      if (newV) {
        this.myMultipleSelections = this.multipleSelection || [];
        this.handleQuery();
      }
    },
  },
  props: {
    innerVisible: Boolean,
    multipleSelection: Array,
  },
  components: {
    carGps,
  },
  methods: {
    // 获取车辆gps信息
    handleGps(row) {
      gpsCar(row.gpsId).then((res) => {
        this.carData = res.data;
        this.carData.carName = row.carName;
        this.flag = true;
      });
      this.showGps = true;
      this.title = "查看车辆GPS";
      // getGpsId(row.carName).then((res) => {
      //   this.carMsg = res.data;
      //   this.carMsg.map((item) => {
      //     if (item.carNumber == row.carName) {
      //       this.carName = row.carName

      //     }
      //   });
      // });
    },
    /** 刷新 */
    refresh() {
      this.showGps = false;
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        license: "",
        name: "",
      };
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset();
      this.handleQuery();
    },
    handleQuery() {
      var that = this;
      getDriverList(this.queryParams).then((response) => {
        this.driverList = response.rows;
        this.total = response.total;
      });
      this.myMultipleSelections.forEach((item2) => {
        that.$nextTick(() => {
          that.$refs.multipleTable.toggleRowSelection(item2, true);
        });
      });
    },
    getRowKeys(row) {
      return row.mobile;
    },
    handleSelectionChange(val) {
      this.selectList = val;
      /*  for (let i = 0; i < this.selectList.length; i++) {
        for (let j = i + 1; j < this.selectList.length; j++) {
          if (
            this.selectList[i].carId == this.selectList[j].carId) {
            this.selectList.splice(j, 1);
            j--;
          }
        }
      } */
    },
    submitForm() {
      let list = [...this.selectList];
      // 数组对象去重
      let map = new Map();
      for(let item of list){
        map.set(item.mobile,item)
      }
      let arr = [...map.values()];
      console.log(arr);
      arr.forEach((e, i) => {
        this.myMultipleSelections.forEach((e2, i2) => {
          if (e.mobile == e2.mobile) {
            arr[i].remark = e2.remark;
          }
        });
        // console.log(e);
      });
      this.$refs.multipleTable.clearSelection();
      this.$emit("reset", arr);
      this.reset();
    },
    cancel() {
      this.$refs.multipleTable.clearSelection();
      this.$emit("reset");
      this.reset();
    },
    // 表单隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
  },
};
</script>

<style scoped>
</style>